<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { tokenMet } from "@/store/user";
import router from "@/router";

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  user: "admin",
  password: "",
});
const rules = reactive<FormRules>({
  user: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});
let typeStr = ref("账号登录");
const userLogin = () => {
  typeStr.value = "账号登录";
};
const scanCodes = () => {
  typeStr.value = "扫码登录";
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      loginMet();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const loginMet = () => {
  if (ruleForm.user === "admin" && ruleForm.password === "123456") {
    tokenMet().getToken("123456", "123456789");
    router.push("/ind");
  } else {
    ElMessage({
      message: "账号或密码错误",
      type: "error",
      duration: 1000,
    });
  }
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
onMounted(() => {
  if (tokenMet().token !== "") {
    router.push("/ind");
  }
});
</script>

<template>
  <div class="loginPage">
    <div class="leftBox">
      <img src="@/assets/login-box-bg-fec91044.svg" alt="" />
      <p>欢迎使用xx管理系统</p>
    </div>
    <div class="rightBox">
      <el-card>
        <div class="loginFun">
          <div class="typeLogin">
            <h3 @click="userLogin">账号登录</h3>

            <h3 @click="scanCodes">扫码登录</h3>
          </div>
          <div class="formBox" v-if="typeStr == '账号登录'">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              @keyup.enter="submitForm(ruleFormRef)"
            >
              <el-form-item label="账号" prop="user">
                <el-input v-model="ruleForm.user" placeholder="请输入账号" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="ruleForm.password"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
            </el-form>
            <div class="btns">
              <el-button type="info" @click="resetForm(ruleFormRef)"
                >重置</el-button
              >
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                >登录</el-button
              >
            </div>
          </div>
          <div class="scanPic" v-else>
            <img src="@/assets/snipaste.png" alt="" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loginPage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ccc;
  display: flex;
  .leftBox,
  .rightBox {
    width: 50%;
    img {
      width: 30%;
      height: 30%;
    }
    p {
      font-size: 28px;
      color: white;
    }
  }
  .leftBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #353e54;
    position: relative;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInFromLeft 1s forwards;
  }
  @keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .rightBox {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: relative;
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFromRight 1s forwards;
    .typeLogin {
      display: flex;
      h3 {
        color: white;
        cursor: pointer;
        &:nth-of-type(1) {
          margin-right: 20px;
        }
      }
    }
  }
  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .el-card {
    background-color: #353e54;
    padding: 30px;
    box-sizing: border-box;
    width: 400px;
    height: 300px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .loginFun {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .formBox {
        padding-top: 40px;
        flex: 1;
        .el-form-item {
          margin-bottom: 32px;
        }
        .btns {
          display: flex;
          justify-content: flex-end;
        }
      }
      .scanPic {
        padding-top: 20px;
        display: flex;
        justify-content: center;
        img {
          width: 180px;
          height: 180px;
        }
      }
    }
  }
}

::v-deep .el-form-item__label {
  color: white;
}
::v-deep .el-input__wrapper {
  background-color: #fff;
}
::v-deep .el-card__body {
  padding: 0 !important;
}
</style>
